import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, TouchableWithoutFeedback, Platform, Animated} from 'react-native';

export default class extends PureComponent {
    state = {
        iconCheck: require('../../../images/icon_check.png'),
        arrowDown: require('./img/arrow_triangle_down.png'),
        arrowDownActive: require('./img/arrow_triangle_h_down.png'),
        arrowUpActive: require('./img/arrow_triangle_h_up.png'),
        arrowUp: require('./img/arrow_triangle_up.png')
    };

    render() {
        const {iconCheck, arrowDown, arrowDownActive, arrowUp, arrowUpActive} = this.state;
        const {volume_sort, coupon_sort, share_price_sort, price_sort, is_9kuai9, setSort, isShowDownList, coverOpacity, downListTop} = this.props;
        return (
            <View style={[styles.container, {height: isShowDownList ? '100%' : 40}]}>
                {
                    isShowDownList ? <Animated.View style={[styles.cover, {opacity: coverOpacity}]}>
                        <View style={styles.cover}/>
                    </Animated.View> : null
                }

                <View style={styles.flexWrap}>
                    <TouchableWithoutFeedback onPressOut={() => {
                        setSort({all: 1});
                    }}>
                        <View style={styles.item}>
                            <Text
                                style={[styles.title, volume_sort === 0 && price_sort === 0 && share_price_sort === 0 ? styles.titleActive : '']}>综合</Text>
                            <View>
                                <Image
                                    source={volume_sort === 0 && price_sort === 0 && share_price_sort === 0 ?
                                        (isShowDownList ? arrowUpActive : arrowDownActive) : arrowDown}
                                    style={styles.bigImg}/>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPressOut={() => {
                        setSort({price_sort: price_sort === 1 ? 2 : 1});
                    }}>
                        <View style={styles.item}>
                            <Text style={[styles.title, price_sort > 0 ? styles.titleActive : '']}>券后价</Text>
                            <View>
                                <Image source={price_sort === 1 ? arrowUpActive : arrowUp} style={styles.smallImg}/>
                                <Image source={price_sort === 2 ? arrowDownActive : arrowDown} style={styles.smallImg}/>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPressOut={() => {
                        setSort({share_price_sort: share_price_sort === 1 ? 2 : 1});
                    }}>
                        <View style={styles.item}>
                            <Text style={[styles.title, share_price_sort > 0 ? styles.titleActive : '']}>分享价</Text>
                            <View>
                                <Image source={share_price_sort === 1 ? arrowUpActive : arrowUp}
                                       style={styles.smallImg}/>
                                <Image source={share_price_sort === 2 ? arrowDownActive : arrowDown}
                                       style={styles.smallImg}/>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPressOut={() => {
                        setSort({volume_sort: volume_sort === 1 ? 2 : 1});
                    }}>
                        <View style={styles.item}>
                            <Text style={[styles.title, volume_sort > 0 ? styles.titleActive : '']}>销量</Text>
                            <View>
                                <Image source={volume_sort === 1 ? arrowUpActive : arrowUp} style={styles.smallImg}/>
                                <Image source={volume_sort === 2 ? arrowDownActive : arrowDown}
                                       style={styles.smallImg}/>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                </View>

                {
                    isShowDownList ? <Animated.View style={[styles.downList, {top: downListTop}]}>
                        <TouchableWithoutFeedback onPressOut={() => {
                            setSort({all: 0});
                        }}>
                            <View style={styles.downItem}>
                                {
                                    volume_sort === 0 && price_sort === 0 && share_price_sort === 0 && coupon_sort === 0 && is_9kuai9 === 0 ?
                                        <React.Fragment>
                                            <Text style={[styles.downTitle, styles.titleActive]}>综合排序</Text>
                                            <Image source={iconCheck} style={styles.iconCheck}/>
                                        </React.Fragment>
                                        : <Text style={[styles.downTitle]}>综合排序</Text>
                                }
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPressOut={() => {
                            setSort({coupon_sort: 2});
                        }}>
                            <View style={styles.downItem}>
                                {
                                    coupon_sort === 2 ?
                                        <React.Fragment>
                                            <Text style={[styles.downTitle, styles.titleActive]}>优惠券面值由高到低</Text>
                                            <Image source={iconCheck} style={styles.iconCheck}/>
                                        </React.Fragment>
                                        : <Text style={[styles.downTitle]}>优惠券面值由高到低</Text>
                                }
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPressOut={() => {
                            setSort({coupon_sort: 1});
                        }}>
                            <View style={styles.downItem}>
                                {
                                    coupon_sort === 1 ?
                                        <React.Fragment>
                                            <Text style={[styles.downTitle, styles.titleActive]}>优惠券面值由低到高</Text>
                                            <Image source={iconCheck} style={styles.iconCheck}/>
                                        </React.Fragment>
                                        : <Text style={[styles.downTitle]}>优惠券面值由低到高</Text>
                                }
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback onPressOut={() => {
                            setSort({is_9kuai9: 1});
                        }}>
                            <View style={styles.downItem}>
                                {
                                    is_9kuai9 === 1 ?
                                        <React.Fragment>
                                            <Text style={[styles.downTitle, styles.titleActive]}>9.9元全网包邮</Text>
                                            <Image source={iconCheck} style={styles.iconCheck}/>
                                        </React.Fragment>
                                        : <Text style={[styles.downTitle]}>9.9元全网包邮</Text>
                                }
                            </View>
                        </TouchableWithoutFeedback>
                    </Animated.View> : null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        zIndex: 2,
        position: 'absolute',
        ...Platform.select({
            ios: {
                top: 65
            },
            android: {
                top: 45
            },
        })
    },
    cover: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,.2)'
    },
    flexWrap: {
        height: 40,
        width: '100%',
        flexDirection: 'row',
        backgroundColor: '#fff',
        zIndex: 10
    },
    item: {
        flex: 1,
        height: 40,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 2
    },
    title: {
        fontSize: 12,
        color: '#666666',
        marginRight: 4
    },
    titleActive: {
        color: '#f01e08'
    },
    bigImg: {
        width: 7,
        height: 7
    },
    smallImg: {
        width: 6,
        height: 6
    },
    downList: {
        position: 'absolute',
        width: '100%',
        top: 40,
        left: 0,
        backgroundColor: '#f6f6f5'
    },
    downItem: {
        marginTop: 1,
        height: 42,
        paddingLeft: 18,
        paddingRight: 18,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    downTitle: {
        fontSize: 13,
        color: '#2d2b2b'
    },
    iconCheck: {
        width: 20,
        height: 20
    }
});
